<template>
  <div class="login_body">
    <el-card style="width: 400px; margin: 200px auto;opacity:0.8">
      <h1 style="text-align: center;color:cadetblue;font-family: 微软雅黑">高校实训实习管理平台</h1>
      <div style="color:black;font-size: 30px;font-family:微软雅黑;text-align: center;padding: 30px 0">欢迎登录</div>
      <el-form :model="user" :rules="rules" ref="rulesFormRef" size="large">
        <el-form-item prop="username">
          <el-input v-model="user.username" clearable="clearable" placeholder="请输入用户名" :prefix-icon="User"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="user.password" show-password clearable="clearable" placeholder="请输入密码" :prefix-icon="Lock"/>
        </el-form-item>
        <el-form-item prop="power">
          <el-select id="power" v-model="user.power" placeholder="请选择您的职务" size="large">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
            <div class="content" style="margin: 20px 0 20px 0">
              <dragVerify v-model:value="form.isVerifyPass"></dragVerify>
            </div>
        <el-form-item>
          <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


<script setup>
import {ref, reactive, getCurrentInstance} from 'vue'
import {User,Lock} from '@element-plus/icons'
import {ElMessage, ElNotification} from "element-plus";
import request from "@/request";
import router from "../router";
const { proxy }=getCurrentInstance()
import dragVerify from '@/components/dragVerify.vue'

const form = reactive({
  isVerifyPass: false, // 滑块验证结果
})

const user= reactive({})

//表单校验
const rules= reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
  // Bug： select选择器未弹出提示文字
  power: [
    {required:true,message:'请选择职务',trigger:'change'},
  ]
})

const options = [
  {
    value: '管理员',
    label: '管理员',
  },
  {
    value: '老师',
    label: '老师',
  },
  {
    value: '学生',
    label: '学生',
  },
]

//只有填写完整才让你登录
const login = ( ) => {
  if(form.isVerifyPass){
    if(document.getElementById("power").value==="管理员"){
      proxy.$refs.rulesFormRef.validate((valid)=>{
        if(valid){
          //输入正确，则向后台发送信息,request中全局统一加上了 后端接口前缀 http://localhost:9090
          //res是后台返回的数据,
          request.get('/admin/login',{params:{
              adm_name:user["username"],
              adm_password:user["password"]
            }}).then(res =>{
            if(res.code===200){//请求成功
              ElNotification({
                type:"success",
                message:"登陆成功"
              })
              let accessToken = res.data.token;//从后台返回的token
              localStorage.setItem('accessToken', accessToken);
              router.push({
                path: "/administrator",
                query: {
                  date:new Date().getTime()
                }
              })
            }else {
              ElNotification({
                type:'error',
                message: "用户名或密码错误"
              })
            }
          })
        }else{
          ElMessage({
            type:"error",
            message:'请输入账号和密码'
          })
        }
      })
    }
    else if(document.getElementById("power").value==="老师"){
      proxy.$refs.rulesFormRef.validate((valid)=>{
        if(valid){
          //输入正确，则向后台发送信息,request中全局统一加上了 后端接口前缀 http://localhost:9090
          //res是后台返回的数据,
          request.get('/teacher/login',{params:{
              tea_phone:user["username"],
              tea_pwd:user["password"]
            }}).then(res =>{
            if(res.code===200){//请求成功
              ElNotification({
                type:"success",
                message:"登陆成功"
              })
              console.log(res.data)
              let accessToken = res.data.token;//从后台返回的token
              localStorage.setItem('accessToken', accessToken);
              localStorage.setItem("teacher",JSON.stringify(res.data.teacher))//缓存用户信息到浏览器
              router.push({
                path: "/teacher",
                query: {
                  date:new Date().getTime()
                },
              })
            }else {
              ElNotification({
                type:'error',
                message: "用户名或密码错误"
              })
            }
          })
        }else{
          ElMessage({
            type:"error",
            message:'请输入账号和密码'
          })
        }
      })
    }
    else{
      proxy.$refs.rulesFormRef.validate((valid)=>{
        if(valid){
          //输入正确，则向后台发送信息,request中全局统一加上了 后端接口前缀 http://localhost:9090
          //res是后台返回的数据,
          request.get('/student/login',{params:{
              stu_phone:user["username"],
              stu_pwd:user["password"]
            }}).then(res =>{
            if(res.code===200){//请求成功
              ElNotification({
                type:"success",
                message:"登陆成功"
              })
              console.log(res)
              let accessToken = res.data.token;//从后台返回的token
              localStorage.setItem('accessToken', accessToken);
              localStorage.setItem("student",JSON.stringify(res.data.student))//缓存用户信息到浏览器
              console.log(localStorage.getItem("student"))
              router.push({
                path: "/student",
                query: {
                  date:new Date().getTime()
                }
              })
            }else {
              ElNotification({
                type:'error',
                message: "用户名或密码错误"
              })
            }
          })
        }else{
          ElMessage({
            type:"error",
            message:'请输入账号和密码'
          })
        }
      })
    }
  }else {
    ElNotification({
      type:"error",
      message:"请滑动滑块至最右边，以证明您是真人！"
   })
  }

}
</script>

<style>
.login_body{
  width: 100%;
  height: 100%;
  min-width: 1000px;
  background-image: url("http://rxs18bfmd.hd-bkt.clouddn.com/login2.png");
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  background-repeat: no-repeat;
  position: fixed;
  line-height: 100%;
  //padding-top: 150px;
}
</style>